<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三维空间</title>
	<style type="text/css">
		body{
			perspective: 800px;
		}
		div{
			width: 300px;
			height: 300px;
		}
		.box1{
			margin: 100px auto;
			transform-style: preserve-3d;
			background-color: rgba(244, 41, 183, 0.3);
			/* transform: rotateY(45deg); */
			animation: xz 2s infinite linear;
		}
		.box2{
			background-color: aquamarine;
			transform: rotateX(45deg);
		}
		@keyframes xz{
			from{
				transform: rotateY(0);
			}
			to{
				transform: rotateY(360deg);
			}
		}
	</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>